header.night {
  background-color: #33495d;

  .box {
    .userinfo {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      .user-container {
        .class {
          ul {
            li {
              color: #fff;
            }
            li:hover {
              color: rgba(47, 255, 172, 0.834);
            }
          }
        }
        .user {
        }
      }

      .user {
        color: #fff;
        span {
        }
      }
      .user:hover {
        color: rgba(47, 255, 172, 0.834);
      }
    }
    .left_title {
      .title {
        background: linear-gradient(to right, #f0eaea, #feb692, #ea5455);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #fff;
      }
    }

    .menu {
      .max_ul_menu {
        .day_and_night {}

        .menu-item {
          color: #eee;

          span {}
        }

        .menu-item:hover {
          filter: none;
          box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        }

        .menu-item.active {
          color: #fff;
          border-bottom: 2px solid skyblue;
          filter: drop-shadow(0 0 2px skyblue);
        }
      }

      .min_ul_menu {
        .day_and_night {}

        .el-dropdown {
          i.iconfont.icon-menu {
            color: #fff !important;
          }

          .el-dropdown-menu {
            li.active {
              color: #fff;
              filter: drop-shadow(0 0 2px skyblue);
            }
          }
        }
      }
    }
  }


}